<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>


<body>
    <div id="app">
        <div>{{counter}}</div>
        <div @click="btnClick">按钮</div>
        <div @click="counter ++">按钮 counter ++</div>
        <div @click="btnClick1(2)">按钮btnClick1(2)</div>
        <div @click="btnClick2(2,$event)">按钮btnClick1(2)</div>
        <div @click="btnClick($evevt),btnClick1(2)">按钮btnClick($evevt),btnClick1(2)</div>

        <div @click="divClick1">
            <div @click.stop="divClick2"> .stop div-button </div>
        </div>
        <div @click.self="divClick1">
            {{counter}}
            <div @click.stop="divClick2"> .self div-button </div>
        </div>
        <div @click.once="divClick2"> .once div-button </div>
        <a href="www.baidu.com" @click.prevent="divClick2">baidu</a>
        <div @click.capture="divClick1">
            divClick1 --> {{counter}}
            <div @click="divClick2"> div-button </div>
        </div>

    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = {
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            btn
        },

    }
    Vue.createApp(app).mount("#app");
</script>

</html>